import { Button, Form, Input, Radio, Toast } from "antd-mobile";
import React from "react";
import "react-quill/dist/quill.snow.css";
import {
  adminQueryTenantDetails,
  adminAddTenant,
  adminUpdateTenant,
} from "../../../common/apis";
import { usersStatus } from "../../../common/constant";
import request from "../../../common/http";
import "./index.less";

class TenantEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tenantDetails: {},
      isLoading: false,
    };

    const searchParams = new URLSearchParams(location.search);
    this.tenantCode = searchParams.get("tenantCode");
  }

  formRef = React.createRef();

  componentDidMount() {
    this.getTenantDetails();
  }

  /**
   * 获取租户详情
   */
  getTenantDetails = async () => {
    if (!this.tenantCode) {
      return;
    }

    const { data } = await request.post(adminQueryTenantDetails, {
      tenantCode: this.tenantCode,
    });

    // 处理 form 表单数据
    if (data) {
      this.formRef.current?.setFieldsValue(data);
    }
  };

  /**
   * 保存租户信息
   */
  save = async () => {
    const values = this.formRef.current?.getFieldsValue();

    let url = adminAddTenant;
    if (this.tenantCode) {
      values.tenantCode = this.tenantCode;
      url = adminUpdateTenant;
    }
    this.setState({ isLoading: true });
    const { success } = await request.post(url, values);

    if (success) {
      Toast.show({
        content: "保存成功",
        icon: "success",
      });
      !this.tenantCode && this.formRef.current?.resetFields();
    }
    this.setState({ isLoading: false });
  };

  /**
   * 渲染函数
   */
  render() {
    const { isLoading } = this.state;
    return (
      <div className="baby-love-tenant-edit">
        <div className="baby-love-tenant-edit-form">
          <Form
            ref={this.formRef}
            initialValues={{
              isAdmin: 0,
            }}
            footer={
              <Button
                block
                type="submit"
                color="primary"
                size="large"
                loading={isLoading}
                onClick={this.save}
              >
                保存
              </Button>
            }
          >
            <Form.Item
              name="tenantName"
              label="租户名"
              rules={[{ required: true, message: "租户名不能为空" }]}
            >
              <Input placeholder="请输入租户名" />
            </Form.Item>
            <Form.Item
              name="tenantCode"
              label="租户编码"
              rules={[{ required: true, message: "租户不能为空" }]}
            >
              <Input disabled={this.tenantCode} placeholder="请输入租户名" />
            </Form.Item>
            <Form.Item
              name="tenantStatus"
              label="租户状态"
              initialValue="NORMAL"
              rules={[{ required: true, message: "请选择租户状态" }]}
            >
              <Radio.Group>
                {Object.keys(usersStatus).map((key) => (
                  <Radio value={usersStatus[key].value}>
                    {usersStatus[key].title}
                  </Radio>
                ))}
              </Radio.Group>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

export default TenantEdit;
